<template>
  <div class="w-100 flex-column flex-1 overflow-hidden">
    <el-table
      class="w-100 flex-1"
      :data="data"
      :height="height"
      stripe
      header-cell-class-name="table-header-cell"
      @selection-change="changeSelect"
      @select="select"
      @select-all="selectAll"
    >
      <!-- 选择框 -->
      <el-table-column
        v-if="hasSelection"
        fixed="left"
        type="selection"
        width="50"
      />

      <!-- 内容列 -->
      <el-table-column
        v-for="(col, index) in columns"
        :key="col.prop + index"
        show-overflow-tooltip
        :label="col.label"
        :width="col.width"
      >
        <template slot-scope="scope">
          <component
            :is="getComponent(col.type)"
            v-bind="{col, row: scope.row}"
            v-on="{...getEvent(col.type)}"
          />
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        v-if="operating && operating.length"
        fixed="right"
        :width="operatingWidth"
        label="操作"
      >
        <template slot-scope="scope">
          <div class="operating-btn-group">
            <el-link
              v-for="btn in operating"
              v-show="btn.show ? btn.show(scope.row) : true"
              :key="btn.name"
              :underline="false"
              :type="btn.type || 'primary'"
              :disabled="btn.disabled ? btn.disabled(scope.row) : false"
              :class="btn.class"
              @click="$emit('clickBtn', scope.row, btn)"
            >
              {{ btn.label }}
            </el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-if="hasPagination" class="mt-16 overflow-hidden">
      <el-pagination
        class="pagination"
        :current-page.sync="pages.page"
        :total="pages.total || 0"
        :page-size="pages.size || 10"
        layout="total, prev, pager, next"
        background
        @current-change="changePage"
      />
    </div>
  </div>
</template>
<script>
/**
 * @param {Array} data                       表格数据
 * @param {Array} columns                    表格列配置
 *   @param {String} prop   -列字段
 *   @param {String} label  -列表头名
 *   @param {Number} width  -列宽
 *   @param {String} type   -解析类型
 * @param {Boolean} [hasSelection = false]   是否多选
 * @param {Boolean} [hasPagination = true]   是否需要分页
 * @param {Object} pages                     分页对象
 *   @param {Number} page   -当前页
 *   @param {Number} size   -每页条数
 *   @param {Number} total  -总条数
 * @param {Array} operating                  操作列按钮列表
 *   @param {String} label     -按钮名称
 *   @param {String} type      -按钮类型
 *   @param {String} name      -唯一标识
 *   @param {Function} disabled-是否禁用,默认参数当前行对象
 *   @param {Function} show    -是否显示,默认参数当前行对象
 * @param {Number} operatingWidth            操作列宽度
 * @callback clickBtn                        操作按钮点击事件
 *   @param {Object} row   -当前行对象
 *   @param {Object} btn   -当前按钮对象
 * @callback changePage                      翻页事件
 * @callback changeSelect                    多选事件
 * @callback select                          多选框点击事件
 * @callback selectAll                       全选事件
 */
import rules from '@/utils/rules'
import components from './components'

export default {
  components: { ...components },
  props: {
    height: {
      type: String,
      default: undefined
    },
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    hasSelection: {
      type: Boolean,
      default: false
    },
    hasPagination: {
      type: Boolean,
      default: true
    },
    pages: {
      type: Object,
      default: () => {}
    },
    operating: {
      type: Array,
      default: () => {
        return []
      }
    },
    operatingWidth: {
      type: [String, Number],
      default: '140'
    }
  },
  data() {
    return {
      rules
    }
  },
  created() {},
  methods: {
    selectAll(selection) {
      this.$emit('selectAll', selection)
    },
    changeSelect(selection) {
      this.$emit('changeSelect', selection)
    },
    select(selection, row) {
      this.$emit('select', { selection, row })
    },
    changePage(val) {
      this.$emit('changePage', val)
    },
    // 识别组件
    getComponent(type) {
      const preset = ['text', 'switch', 'select', 'number', 'selectData', 'array', 'arrayPop', 'image', 'handle']
      // 预设组件
      if (preset.includes(type)) {
        return 'td-' + type
      } else {
        // 默认 文本组件
        return 'td-text'
      }
    },
    // 获取组件事件
    getEvent(type) {
      const handleEventComp = ['switch', 'select', 'number', 'handle']
      if (handleEventComp.includes(type)) {
        return { clickBtn: (row, btn) => this.$emit('clickBtn', row, btn) }
      } else {
        return {}
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination {
  float: right;
}
.table-operation__btn {
  .el-button {
    margin-right: 8px;
  }
}
.operating-btn-group {
  .el-link {
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
}
</style>
